@import "reset.css";
@import "fonts/iconfont.css";
@import "leaflet.css";
@import "leaflet.draw.css";
@import "leaflet.measurecontrol.css";
@import "iclient9-leaflet.css";
@import "index.css";
@import "leftCommon.css";
@import "rightTool.css";
@import "topFloatbox.css";
@import "repalybar.css";
@import "hotmap.css";
@import "L.Control.MousePosition.css";
@import "leftDivTool.css";
@import "leaflet.draw.css";

[v-cloak]{display: none;}

* {
    box-sizing: border-box; 
}
@media screen and (min-width:750px) {
    html,
    body {
        font-size: 12px !important;
    
    }
}

@media screen and (min-width:1200px) {
    html,
    body {
        font-size: 14px !important;
    
    }
}


@media screen and (min-width:1920px) {
    html,
    body {
        font-size: 18px !important;
        
    }
}

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}

body{
    width:100%;
    height: 100%;
    overflow:hidden !important;
    // 日期弹出框
    // .el-picker-panel {
    //     top: 23rem!important;
    // }
}

::-webkit-input-placeholder {
    color: #031134 !important;
}

::-ms-input-placeholder {
    color: #031134 !important;
}

::-moz-placeholder {
    color: #031134 !important;
}

.el-header {
    width: 100%;
    background-color: #0a5083;
    color: #333;
    text-align: center;
    height: 4rem !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .map_logo {
        width: 19rem;
        height: 100%;
        display: flex;
        align-items: center;
        img {
            width: 2rem;
            height: 2rem;
            margin: 0 0.4rem 0 1rem;
        }
        span {
            font-size: 1.33rem;
            color: #fff;
            margin-left: 10px;
            letter-spacing: 0.1rem;
        }
    }
    .header-left {
        width: 67%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .map_nav {
        width: 52rem;
        height: 100%;
        .el-menu--horizontal {
            border: 0;
            height: 100%;
        }
        .el-menu-item {
            font-size: 1rem;
            width: 5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100% !important;
            padding: 0 0.45rem;
            border: 0 !important;
        }
        .Hotbg,
        .QBFFbg,
        .ZHGJbg,
        .TJbg,
        .planProcess{
            width: 8rem;
            // height: 6rem;
            background: #333;
            position: absolute;
            top: 4rem;
            left: 13.5rem;
            .setting-Hot{
                margin: 0.5rem;
                background-color: #fff;
                span{
                    display: block;
                    height: 2rem;
                    line-height: 2rem;
                    a{
                        font-size: 1rem;
                        color: #000;
                    }
                    
                }
            }
        }
        
        .ZHGJbg{
            left: 8.5rem;
        }
        .planProcess{
            left:3.5rem;
        }
        .Hotbg{
            left:18.5rem;
        }
        .TJbg{
            left:38.5rem;
        }
    }
    .mao_search {
        .el-input__inner {
            width: 16.33rem;
            height: 1.94rem !important;
            border-radius: 1.94rem;
            font-size: 1rem;
            background-image: linear-gradient( #ffffff, #ffffff), linear-gradient( #ffffff, #ffffff);
            background-blend-mode: normal, normal;
            box-shadow: inset 0rem 0.06rem 0.28rem 0rem rgba(0, 0, 0, 0.27);
            border-style: solid;
            border-width: 0.06rem;
            color: #031134;
        }
        .el-input__suffix {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .el-input__icon {
            font-size: 0.95rem;
            font-weight: bold;
            color: #031134;
        }
    }
    .header-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        align-self: flex-end;
        width: 30%;
        height: 100%;
    }
    .userInfo .avatar-name {
        span {
            color: #fff;
            font-size: 1rem;
        }
        a.iconfont {
            color: #fff;
            font-size: 1.13rem;
            padding: 0.5rem;
            // cursor: pointer;
        }
        a.iconfont.icon-diannao{
            font-weight: bold;
        }
    }
}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    width: 100%;
    // height: calc(100% - 4rem);
    padding: 0!important;
    // line-height: 160px;
}

.leaflet-container {
    background-color: #fff;
}


// ------------------------

#map {
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100%;
    // height:calc(100%-72px);
    height: 93%;
}

// 标牌
.class_icon_1,
.class_icon_2{
    div {
        width: 5rem;
       
        border: 1px solid #2bc468;
        // border-radius: 0.5rem;
        background-color: rgba($color: #fff, $alpha: .8);
        
        span {
            display: inline-block;
            width: 100%;
            font-size: 0.67rem;
            color: #000;
            font-weight: 500;
            
            padding: 0 0.2rem;
        }
    }
}

.class_icon_1 {
    div { 
        margin-left: 2rem;
        text-align: left;
    }
}

.class_icon_2{
    div {
        margin-top: -3rem;
        margin-left: -2.5rem;
        text-align: center;
    }
}
.vhf_class_icon,
.adsb_class_icon{
    div{
        width: 6rem;
       
        border: 1px solid #2bc468;
        border-radius: 1rem;
        background-color: rgba($color: #fff, $alpha: .8);
        
        span {
            display: inline-block;
            width: 100%;
            font-size: 0.67rem;
            color: #000;
            font-weight: 500;
            text-align: center;
            padding: 0 0.2rem;
        }
    }
    
}
.vhf_class_icon,
.adsb_class_icon{
    div {
        margin-top: 2rem;
        margin-left: -2.5rem;
        span{
            
        }
    }
}
.flightIcon_da {
    width: 4rem;
    height: 4rem;
}
.flightIcon_da_pitch {
    width: 4.5rem;
    height: 4.5rem;
}

.flightIcon_zhong {
    width: 2.1rem;
    height: 2.1rem;
}

.flightIcon_zhong_pitch {
    width: 2.8rem;
    height: 2.8rem;
}
.flightIcon_xiao {
    width: 1rem;
    height: 1rem;
}
.flightIcon_xiao_pitch {
    width: 2rem;
    height: 2rem;
}

.MarkerIconSize {
    width: 1.1rem;
    height: 1.1rem;
}

.opacity_alarmFly{
    
    animation: changeOpacity 1s ease-in-out  infinite normal ;
}

@keyframes changeOpacity {
    0%{ opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}